import './style.less'
import ImageVideo from '@/components/ImageVideo'
const props = {
  list: {
    type: Array,
    default: () => []
  },
  page: {
    type: Number,
    default: 0
  },
  cssLandscape: {
    type: Boolean,
    default: false
  }
}

function data() {
  return {
    options: {
      acceleration: true,
      display: 'single',
      // 时间间隔
      duration: 300,
      // 倾斜角度
      inclination: 50,
      elevation: 100,
      // 默认有左右切换按钮
      hasToggleBtn: false,
      when: {
        // 翻页
        turning: (event, page, pageObj) => {
          // console.log(event, page, pageObj)
          // console.log("the current page is " + page);
          this.$emit('input', page)
          this.$emit('change', { page, pageObj })
          this.currentPage = page
        },
        turned: (event, page, view) => {
          // console.log(event, page, view)
        },
        end: function(event, pageObject, turned) {
          // console.log(event, pageObject, turned)
        },
        start: (event, pageObject, corner) => {
          // console.log(event, pageObject, corner)
        },
        // triggered before turned
        first: () => {
          // console.log('start')
          this.$emit('start')
        },
        // triggered before turned
        last: () => {
          // console.log('end')
          this.$emit('end')
        }
      }
    },
    currentPage: 1,
    filpClassName: 'flip-over-box',
    isTurn: false
  }
}

const watch = {
  list(nv) {
    if (nv.length > 0 && !this.isTurn) {
      this.isTurn = true
      this.$nextTick(this.turn)
    }
  },
  page(nv) {
    this.$nextTick(() => {
      this.toPage(nv)
    })
  }
}

const computed = {
  className() {
    return `.${this.filpClassName}`
  }
}

function render(h) {
  const vnode = []
  this.list.forEach((e, i) => {
    vnode.push(h('div', {
      class: 'flip-over-item',
      key: i
    }, [h('ImageVideo', { key: i, class: ['flip-over-item-img', `imag-${i + 1}`], attrs: { 'data-url': e.url }, props: { src: e.src, isImage: true, watermark: false, lazyLoad: false, zooming: true, landscape: this.cssLandscape, fit: 'contain' }, on: { 'image-video-click': this.clickHandle }})]))
  })
  const operator = []
  if (this.currentPage > 1) {
    operator.push(h('div', { class: 'flip-over-prev flip-over-operator', on: { touchstart: this.prev }}, [h('svg-icon', { props: { iconClass: 'xiangzuo' }})]))
  }
  if (this.currentPage < this.list.length) {
    operator.push(h('div', { class: 'flip-over-next flip-over-operator', on: { touchstart: this.next }}, [h('svg-icon', { props: { iconClass: 'xiangyou' }})]))
  }
  return h('div', { class: ['flip-over-wrap'] }, [h('div', { class: ['flip-over', this.filpClassName] }, vnode), ...operator])
}

const methods = {
  turn() {
    if (this.cssLandscape) {
      this.options.width = '100vh'
      this.options.height = '100vw'
    }
    this.options.cssLandscape = this.cssLandscape
    $(this.className).turn(this.options)
    this.isTrun = true
  },
  next(e) {
    e.stopPropagation()
    $(this.className).turn('next')
    this.resetImageVideo(this.$children)
    // const pageCount = $(this.className).turn('pages')
    // const currentPage = $(this.className).turn('page')
    // if (currentPage <= pageCount) {
    //   $(this.className).turn('page', currentPage + 1)
    // }
  },
  prev(e) {
    e.stopPropagation()
    $(this.className).turn('previous')
    this.resetImageVideo(this.$children)
    // const currentPage = $(this.className).turn('page')
    // if (currentPage !== 1) {
    //   $(this.className).turn('page', currentPage - 1)
    // }
  },
  toPage(page) {
    if (!isNaN(page)) {
      this.$nextTick(() => {
        if (page <= 0 || page === this.currentPage) {
          return
        } else if (page > $(this.className).turn('pages')) { return }
        $(this.className).turn('page', page)
      })
    }
  },
  rawImage(i) {
    const item = this.list[i - 1]
    this.$set(item, 'src', item.url)
    // const el = $(`.imag-${i}`)
    // $(el.find('img')).get(0).src = el.data('url')
    // console.log($(el.find('img')).get(0))
  },
  clickHandle(e) {
    this.$emit('image-video-click', e)
  },
  resetImageVideo(children) {
    for (const c of children || []) {
      if (c.$options.name === 'ImageVideo') {
        c.resetScaleMove()
      }
      if (c.$children) {
        this.resetImageVideo(c.$children)
      }
    }
  }
}

export default {
  model: {
    prop: 'page',
    event: 'input'
  },
  components: {
    ImageVideo
  },
  props,
  data,
  created() {
    this.options.page = this.page || 1
  },
  computed,
  watch,
  methods,
  render
}
